<template>

    
  <div class="login">
     <div class="login-text">
          <span class="login-text1">登 <span class="login-text2">|</span> 录</span>
      </div>
    <div class="input-wrap">
        <spon class="wenzhi" >用户名：</spon>
        <input type="text" v-model="name" style='background:none;' />
        <span v-if="error.name" class="err-msg"><br/>{{error.name}}</span>
    </div>
    <div class="input-wrap">
        <spon class="wenzhi">密&nbsp;&nbsp;&nbsp;&nbsp;码：</spon>
        <input type="password" v-model="pwd" style='background:none;' />
        <span v-if="error.pwd" class="err-msg"><br/>{{error.pwd}}</span>
    </div>
    <div class="input-wrap">  
        <button @click="login" style='background:none;' class="button">登录</button>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <button @click="login" style='background:none;' class="button">注册</button>
    </div>
  </div>
  
</template>

<script>
import axios from 'axios';
import myapi from'../api.js'
    export default {
  data() {
      return {
          name: '',
          pwd : '',
          error : {
              name: '',
              pwd : ''
          }
      }
  },
   methods : {
      check(name,pwd) {
          if(!name) {
              this.error.name = '请输入姓名'
              return false
          }
          if(!pwd){
              this.error.pwd = '请输入密码'
              return false
          }
      },
      login() {
          const { name, pwd, $router} = this
          if(!this.check(name,pwd)) return
          if(name == 'admin' && pwd == '123'){
              $.router.push({ name : 'main' })
          } else {
              alert('用户名错误')
          }
      }
  }
}
</script>
<style scoped>
.login {
        background: url("../assets/登录.jpg") no-repeat;
        background-position: center;
        background-size: cover;
        border: 1px solid #DCDFE6;
        width: 600px;
        height: 400px;
        margin: 160px auto;
        padding: 180px 35px 15px 35px;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        box-shadow: 0 0 25px palegreen;
}
.login-text{
        text-align: center;
        margin: 0 auto 10px auto;
        color: #66CD00;
        font-weight: bold;
        width:190px;
        height:40px;
        
}
.login-text1{
    color: rgb(57, 70, 255);
    font-size: 35px;
}
.login-text2{
    font-size: 35px;
    color:rgb(240, 255, 101);
}
.wenzhi{
    color:rgb(129, 255, 150);
    font-size:22px;
}
.input-wrap{
    margin: 20px 0 0 0;
}
.button{
    color:rgb(126, 255, 100);
    font-size:18px;
}
</style>